<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item, index) in filteredItem" :key="'breadcrumb' + index">{{
      item
    }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { useBreadcrumbStore } from '../../stores/breadcrumb.js'
import { storeToRefs } from 'pinia'

import { useRoute } from 'vue-router'
import { watch } from 'vue'
const breadcrumbStore = useBreadcrumbStore()
const { filteredItem, path } = storeToRefs(breadcrumbStore)
const route = useRoute()

watch(
  () => route.name,
  (nv, ov) => {
    path.value = nv
    console.log(path.value)
  },
  {
    immediate: true,
    deep: true
  }
)
</script>

<style scoped lang="scss">
.el-breadcrumb {
  margin: 12px;
  font-size: 16px;
}
</style>
